<template>
	<!-- 头部 -->
	<view class="music-head" :style="{color :color}">
		<!-- 左 -->
		<view class="music-head-icon" v-if="icon">
			<!-- 左箭头 -->
			<text>
				<svg class="icon" aria-hidden="true" @tap="handleToback">
				    <use xlink:href="#icon-zuojiantou2"></use>
				</svg>
			</text> |
			<!-- 小房子 -->
			<text>
				<svg class="icon" aria-hidden="true" @tap="handleToHome">
				    <use xlink:href="#icon-home"></use>
				</svg>
			</text>
		</view>
		<!-- 占位   因为用的是弹性布局 -->
		<view class="music-head-icon" v-else></view>
		<!-- 中 -->
		<view class="namess">
			{{title}}
		</view>
		<!-- 右 -->
		<view class="music-head-icon"></view>
	</view>
	
</template>

<script setup>
	import { defineProps  } from 'vue';
	const props =  defineProps(['title','icon','color'])
	// console.log(props)
	const handleToback=()=>{
		// 返回到上一个页面
		uni.navigateBack()
	}
	const handleToHome=()=>{
		// 返回到首页
		uni.navigateTo({
			url:'/pages/index/index'
		})
	}
</script>

<style scoped>
.music-head{
	width:100% ;
	height:75px;
	font-size: 16px;
	line-height: 70px;
	text-align: center;
	color: #000;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	border-bottom: 1px solid #ccc;
}
.music-head-icon{
	width: 90px;
	line-height: 30px;
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border-radius: 15px;
	display: flex;
	/* 平均分配 */
	justify-content: space-evenly;
}
.icon{
	width: 20px;
	height: 20px;
	fill: white;
	transform: translateY(4px);
}
.namess{
	overflow: hidden;
	display: -webkit-box;
	/* 允许换两行 */
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow:ellipsis;
}
</style>